<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix" style="padding: 10px;line-height: 24px">
            <span style="font-size: 24px;">数据统计</span>
          </div>
          <div>
            <panel-group @handleSetLineChartData="handleSetLineChartData" />
          </div>


          <el-row style="background: #fff; padding: 30px 16px 0; margin-bottom: 32px">
            <line-chart :chart-data="lineChartData" />
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-card style="margin-bottom: 20px;padding-bottom: 20px">
            <div slot="header" class="clearfix" style="padding: 10px;line-height: 24px">
              <span style="font-size: 24px;">快捷操作</span>
            </div>
            <div style="position: relative">
              <el-row style="margin: 20px 0 40px 0" v-hasPermi="['gaoxin:workbench:quick1']">
                <el-col :span="8">
                  <div class="quick-button" @click="toMyTask">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="people" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      我的任务
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="quick-button" @click="toMyDept">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="peoples" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      我的团队
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="quick-button"  @click="toRegister">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="button" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      患者登记
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin: 40px 0 0 0"  v-hasPermi="['gaoxin:workbench:quick2']">
                <el-col :span="8">
                  <div class="quick-button"  @click="toTask">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="date" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      任务排程
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="quick-button"  @click="toAudit">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="education" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      评定审核
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="quick-button" @click="toAddAssess">
                    <div class="quick-button-icon">
                      <svg-icon icon-class="drag" ></svg-icon>
                    </div>
                    <div class="quick-button-text">
                      新增模板
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="padding: 10px;line-height: 24px">
              <span style="font-size: 24px;">个人信息</span>
            </div>
            <div >
              <div class="text-center">
                <userAvatar :user="user" />
              </div>
              <ul class="list-group list-group-striped" style="font-size: 10px">
                <li class="list-group-item">
                  <svg-icon icon-class="user" />医生编号
                  <div class="pull-right">{{ user.userName }}</div>
                </li>
                <li class="list-group-item">
                  <svg-icon icon-class="phone" />手机号码
                  <div class="pull-right">{{ user.phonenumber }}</div>
                </li>
                <li class="list-group-item">
                  <svg-icon icon-class="email" />用户邮箱
                  <div class="pull-right">{{ user.email }}</div>
                </li>
                <li class="list-group-item">
                  <svg-icon icon-class="peoples" />当前角色
                  <div class="pull-right">{{ roleGroup }}</div>
                </li>
                <li class="list-group-item">
                  <svg-icon icon-class="date" />创建日期
                  <div class="pull-right">{{ user.createTime }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "../../system/index/index";
import LineChart from "../../dashboard/LineChart";
import {
  listIndex,
  listIndexWeek,
  listIndexLine1,
  listIndexLine2,
  listIndex2,
  listIndex3,
} from "@/api/system/index";
import {getUserProfile} from "@/api/system/user";
import userAvatar from "@/views/system/user/profile/userAvatar";

const lineChartData = {
  newVisitis: {
    week1: [],
    week2: [],
    time: [],
  },
  messages: {
    week1: [],
    week2: [],
    time: [],
  },
  purchases: {
    week1: [],
    week2: [],
    time: [],
  },
  shoppings: {
    week1: [],
    week2: [],
    time: [],
  },
};

export default {
  name: "Index",
  components: {
    userAvatar,
    PanelGroup,
    LineChart,
  },
  data() {
    return {
      lineChartData: lineChartData.purchases,
      weekTime1: [], //周 待评估时间列表
      weekTime2: [], //周 已评估时间列表
      time: [],
      weekData1: [], //周 待评估人次列表
      weekData2: [], //周 已评估人次列表
      flag: 0,
      user: {},
      roleGroup: null,
      postGroup: null,
    };
  },

  created() {
    this.getUser();
    this.getList();
    console.log("----------")
    console.log("roles",this.$store.state.user.roles)
    console.log("----------")
  },

  methods: {
    //我的任务
    toMyTask() {
      this.$router.push("/execute/myTask");
    },
    //我的团队
    toMyDept() {
      this.$router.push("/dept/myDept");
    },
    //患者登记
    toRegister() {
      this.$router.push("/workflow/register/new");
    },
    //任务排程
    toTask() {
      this.$router.push("/workflow/task/index");
    },
    //评定审核
    toAudit() {
      this.$router.push("/workflow/audit/index");
    },
    //新增模板
    toAddAssess() {
      this.$router.push("/setting/template/assess/add");
    },

    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getList() {
      // 查询 周 待评估时间 及 每天对应的待评估人次
      Promise.all([listIndexLine1(), listIndexLine2()]).then(response => {
        response[0].rows.forEach(item => {
          this.weekData1.push(item.status * 1);
        })
        response[0].rows.forEach(item => {
          this.weekTime1.push(item.timeWeek);
        })
        response[1].rows.forEach(item => {
          this.weekData2.push(item.status * 1);
        })
        response[1].rows.forEach(item => {
          this.weekTime2.push(item.timeWeekDone);
        })
        this.lineChartHandler();
      });
    },
    // 获取当前日期前七天的 MM-dd，并组成数组
    getPreSevenDay() {
      let date = new Date();
      let result = [];
      for(let i = 0; i < 7; i++) {
        let day = new Date(date.getTime() - i * 24 * 3600 * 1000);
        let month = day.getMonth() + 1;
        let dayDate = day.getDate();
        let markMonth = '';
        let markDay = '';
        month < '10' ? markMonth = '0' : markMonth = '';
        dayDate < '10' ? markDay = '0' : markDay = '';
        result.push(`${markMonth}${month}-${markDay}${dayDate}`);
      }
      result = result.reverse();
      return result
    },
    // 处理折线图所需的数据
    lineChartHandler() {
      // 获取前7天日期
      let sevenDay = this.getPreSevenDay();
      // 对查询到的时间去重、排序
      let timeList = Array.from(new Set(this.weekTime1.concat(this.weekTime2)));
      timeList.sort(function (x, y) {
        if (x < y) {
          return -1;
        }
        if (x > y) {
          return 1;
        }
        return 0;
      });
      // 将待评定人次插入到对应的日期中
      let data1 = [];
      for(let i = 0;i < sevenDay.length;i++) {
        const index = this.weekTime1.indexOf(sevenDay[i])
        if(index > -1) {
          data1[i] = this.weekData1[index]
        }else {
          data1[i] = 0
        }
      }
      // 将已评定人次插入到对应的日期中
      let data2 = [];
      for(let i = 0;i < sevenDay.length;i++) {
        const index = this.weekTime2.indexOf(sevenDay[i])
        if(index > -1) {
          data2[i] = this.weekData2[index]
        }else {
          data2[i] = 0
        }
      }


      lineChartData.purchases.time = sevenDay;
      lineChartData.purchases.week1 = data1;
      lineChartData.purchases.week2 = data2;
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.el-login-footer {
  height: 20px;
  line-height: 20px;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #000;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.quick-button{
  width: 80px;
  height: 80px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  background-color: #e8f3ff;
  border-radius: 5px;
}

.quick-button:hover {
  background-color: #34bfa3;
}

.quick-button-icon {
  text-align: center;
  position: relative;
  top: 15px;
  left: 25px;
  width: 30px;
  height: 30px;
  line-height:30px;
}
.quick-button-text {
  text-align: center;
  position: relative;
  top: 20px;
  left: 6px;
  width: 68px;
}
</style>
